<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>VUE组件-父子组件交互-自定义事件</title>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <span>当前总数：{{totalCount}}</span><br/>
            <child @childIncresment="totalIncreasement"></child>
        </div>
    </body>
    <script type="text/javascript">
        Vue.component('child', {
            template: '<div>当前组件数量：<input type="button" @click="childClick" :value="childCount" /></div>',
            data: function() {
                return {
                    childCount: 0
                };
            },
            methods: {
                childClick: function() {
                    this.childCount++;
                    // 触发子组件自增事件
                    this.$emit("childIncresment");
                }
            }
        });

        var vueObj = new Vue({
            el: '#app',
            data: {
                totalCount: 0
            },
            methods: {
                totalIncreasement: function() {
                    console.log("触发了父组件的方法");
                    this.totalCount++;
                }
            }
        });
    </script>
</html>